<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">
        <span v-if="type=='add'">新增</span>
        <span v-if="type=='update'">编辑</span>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         广告名称:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入广告名称" v-model="ad_name" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         广告描述:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入广告描述" v-model="ADDESC" type="textarea" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px" :gutter="10">
      <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
        logo图片 :
      </el-col>
      <el-col :span="7">
        <el-upload
          class="avatar-uploader"
          :action="responseUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span style="color: #f00">上传图片尺寸比例375:175,建议图片大小为100KB,格式为JPG/PNG。</span>  
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         跳转类型:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select v-model="jumpSelected"
            clearable
            @change="onGetJumpValue"
            placeholder="请选择跳转类型">
            <el-option
              v-for="item in jumpList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         跳转值:
      </el-col>
      <el-col :span="7">
        <el-input :placeholder="placeholder" v-model="ad_jumpValue" :disabled="typeDisabled" :readonly="is_modifly" @focus="onGetJump"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        开始投放时间:
      </el-col>
      <el-col :span="7">
        <el-date-picker
          v-model="startTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始时间">
        </el-date-picker>  
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        结束投放时间:
      </el-col>
      <el-col :span="7">
        <el-date-picker
          v-model="endTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="结束时间">
        </el-date-picker>  
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
         删除标记:
      </el-col>
      <el-col :span="7">
        <template>
          <el-select 
            v-model="deleteSign"
            clearable
            placeholder="请选择刪除标志">
            <el-option
              v-for="item in deleteSignList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="7" :offset="3">
        <el-button type="primary" class="myBgGreen" v-if="type=='update' && isShow(152)" @click="onEditAd">保 存</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='add'" @click="onCreate">新 增</el-button>
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      </el-col>
    </el-row>
    
    <!--选择跳转值弹出框 start-->
    <el-dialog title="选择跳转值" class="myRoleDialog" :visible.sync="newJumpValueDialog" >
      <div>
        <el-input placeholder="输入关键字进行搜索" v-model="kw_jump" class="input-with-select">
          <el-button type="primary" slot="append" class="el-icon-search" @click="onSearch"></el-button>
        </el-input>
      </div>
      <div class="myPaddingTop_10px">
        <el-tree
          class="myOV_y_400px" 
          ref="jumpDlg"
          v-loading="jumpDlgListLoading"
          :data="jumpDlgList"
          :props="jumpDlgProps"
          node-key="GOODS_ID"
          :render-content="renderContent"
          @check-change="onChange"
          :filter-node-method="filterNode"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newJumpValueDialog = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onAssignSub">提 交</el-button>
      </div>
    </el-dialog>
    <!--选择跳转值弹出框 end-->
  </div>
</template>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .myOV_y_400px{
    max-height: 400px;
    min-height: 200px;
    overflow-y:scroll;
    border:1px solid #f2f2f2;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
</style>
<script>
  import { EBIZ_API , EBIZ_SHOW_PIC_API } from '@/config/baseUrl';
  import { getJumpValue , addAd , getAd , editAd } from '@/api/online';
  import qs from "querystring";
  export default {
    data(){
      return{
        title: "超市广告管理",
        id: "",
        is_modifly:false,
        type:"",
        ad_name:"",
        imageUrl:"",
        saveImageUrl:"",
        jumpSelected:"",
        jumpList:[
          {value:2,label:"url"},
          {value:10,label:"超市商品详情"},
          {value:11,label:"餐饮商品详情"},
          {value:12,label:"团购商品详情"},
          {value:20,label:"超市商品分类"},
          {value:21,label:"餐饮商品分类"},
          {value:22,label:"团购商品分类"}
        ],
        ad_jumpValue:"",
        is_showURL:true,
        jumpValueSelected:"",
        jumpValueList:[],
        responseUrl:EBIZ_API+'/appAdmin_pictures/save.do?pictype=adpic',//上传图片的地址url
        adjumpValue:"",
        ADDESC:"",
        startTime:"",
        endTime:"",
        deleteSign:"",
        deleteSignList:[{value:0,label:"未删除"},{value:1,label:"已删除"}],
        typeDisabled:false,
        num:0,

        newJumpValueDialog:false,
        kw_jump:"",
        jumpDlgListLoading:false,
        jumpDlgProps: {
          children: 'children',
          label: 'GOODSNAME'
        },
        jumpDlgList:[],
        placeholder:"请输入跳转URL",
        isShowJump:false,
        goodstype:"",
        jumpName:"",
        jumpId:""
      }
    },
    components: {
        
    },
    watch: {
      kw_jump(val) {
        this.$refs.jumpDlg.filter(val);
      }
    },
    created(){
      document.title=this.title;
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;
      if(this.type=='add'){

      }
      if(this.type=='update'){
        this.onGetAd();
      }
      
    },
    methods:{
      filterNode(value, data) {
        if (!value) return true;
        return data.GOODSNAME.indexOf(value) !== -1;
      },     
      onAssignSub(){//提交跳转值
        let vm=this;
        var jump = vm.$refs.jumpDlg.getCheckedNodes();
        if (jump.length > 0) {
          vm.jumpName = jump[0].GOODSNAME;
          vm.jumpId = jump[0].GOODS_ID;
        }else{
          vm.jumpName = "";
          vm.jumpId = "";
        }       
        vm.ad_jumpValue=vm.jumpName;
        vm.newJumpValueDialog = false;
      },
      onChange(a,b,c){
        let vm=this;
        if(b){
          vm.$refs.jumpDlg.setCheckedKeys([]);
          vm.$refs.jumpDlg.setCheckedKeys([a.GOODS_ID]);
        }else{
          vm.$refs.jumpDlg.setCheckedKeys([]);
        }
      },
      onGetJump(){
        let vm=this;
        if(vm.isShowJump){
          vm.kw_jump="";
          let params={
            GOODSTYPE:vm.goodstype,
            DELETED:0
          }
          vm.jumpDlgListLoading=true;
          getJumpValue(params).then(response => {
            let res=response.data.OBJECT;
            vm.newJumpValueDialog=true;
            vm.jumpDlgList=res;
            vm.jumpDlgListLoading=false;
            setTimeout(function(){
              vm.$refs.jumpDlg.setCheckedKeys([vm.jumpId]);
            },100) 
          }).catch(error => {
            vm.jumpDlgListLoading=false;
          })
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`店铺名称：${node.data.STORENAME}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `[${node.data.SPECIFICATIONS}]`
            )
          ]
        );
      },
      onSearch(){

      },
      onEditAd(){
        let vm=this,jumpValue="",jumpUrl="";
        jumpUrl=vm.ad_jumpValue;
        jumpValue=vm.jumpId;
        if(vm.jumpSelected==10||vm.jumpSelected==11||vm.jumpSelected==12){
          jumpUrl="";
        }
        if(vm.jumpSelected==20||vm.jumpSelected==21||vm.jumpSelected==22){
          jumpValue=vm.ad_jumpValue;
          jumpUrl="";
        }
        if(vm.jumpSelected==2){
          jumpValue=vm.ad_jumpValue;
        }
        let params={
          AD_ID:vm.id,
          ADPLACE_ID:2,
          JUMPVALUE:jumpValue,
          ADNAME:vm.ad_name,
          ADDESC:vm.ADDESC,
          ADPIC:vm.saveImageUrl,
          JUMPTYPE:vm.jumpSelected,
          url:jumpUrl,
          sel:5,
          BEGINTIME:vm.startTime,
          ENDTIME:vm.endTime,
          DELETED:vm.deleteSign
        }
        editAd(qs.stringify(params)).then(response => {
          vm.$message.success('执行成功！');
          vm.$router.go(-1);
        }).catch(error => {
          vm.$message.error('执行失败！');
        })
      },
      onCreate(){//添加
        let vm=this,jumpValue="",jumpUrl="";
        jumpUrl=vm.ad_jumpValue;
        jumpValue=vm.jumpId;
        if(vm.jumpSelected==10||vm.jumpSelected==11||vm.jumpSelected==12){
          jumpUrl="";
        }
        if(vm.jumpSelected==20||vm.jumpSelected==21||vm.jumpSelected==22){
          jumpValue=vm.ad_jumpValue;
          jumpUrl="";
        }
        if(vm.jumpSelected==2){
          jumpValue=vm.ad_jumpValue;
        }
        let params={
          ADPLACE_ID:2,
          JUMPVALUE:jumpValue,
          ADNAME:vm.ad_name,
          ADDESC:vm.ADDESC,
          ADPIC:vm.saveImageUrl,
          JUMPTYPE:vm.jumpSelected,
          url:jumpUrl,
          sel:5,
          BEGINTIME:vm.startTime,
          ENDTIME:vm.endTime,
          DELETED:vm.deleteSign
        }
        addAd(qs.stringify(params)).then(response => {
          let res=response.data;
          vm.$message.success("添加数据成功！");
          vm.$router.go(-1);
        }).catch(error => {
          vm.$message.error("添加数据失败！");
        })
      },
      onBack(){//返回
        this.$router.go(-1);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.saveImageUrl=res.saveUrl;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      onGetJumpValue(val){//动态拉取跳转值
        let vm=this;
        vm.ad_jumpValue="";
        vm.jumpName="";
        vm.jumpId="";
        if(val==2){
          vm.placeholder="请输入跳转URL";
          vm.isShowJump=false;
          vm.typeDisabled=false;
        }
        if(val==10||val==11||val==12){
          vm.placeholder="请选择跳转值";
          vm.isShowJump=true;
          vm.typeDisabled=false;
          if(vm.ad_jumpValue=='1'||vm.ad_jumpValue=='2'||vm.ad_jumpValue=='3'){
            vm.ad_jumpValue="";
          }
        }
        if(val==20||val==21||val==22){
          vm.typeDisabled=true;
        }
        if(val==10){
          vm.goodstype=1;//超市
        }
        if(val==11){
          vm.goodstype=2;//餐饮
        }
        if(val==12){
          vm.goodstype=3;//团购
        }
        if(val==20){
          vm.ad_jumpValue="1";
        }
        if(val==21){
          vm.ad_jumpValue="2";
        }
        if(val==22){
          vm.ad_jumpValue="3";
        }
      },
      onGetAd(){//拉取对应id的广告信息(编辑使用)
        let vm=this;
        let params={
          AD_ID:vm.id
        }
        getAd(params).then(response => {
          let res=response.data.OBJECT;
          vm.ad_name=res.ADNAME;
          vm.ADDESC=res.ADDESC;
          vm.imageUrl=EBIZ_SHOW_PIC_API + res.ADPIC;//"http://i.jimeicang.com/image/wyds/"+res.ADPIC;
          vm.saveImageUrl=res.ADPIC;
          vm.jumpSelected=res.JUMPTYPE;
          vm.startTime=res.BEGINTIME;
          vm.endTime=res.ENDTIME;
          vm.deleteSign=res.DELETED;
          vm.onGetJumpValue(res.JUMPTYPE);//动态拉取跳转值
          if(res.JUMPTYPE==10||res.JUMPTYPE==11||res.JUMPTYPE==12){
            vm.onGetJump_edit(res.JUMPVALUE);
          }
          if(res.JUMPTYPE==2){
            vm.ad_jumpValue=res.JUMPVALUE;
          }
        }).catch(error => {
        })
      },
      onGetJump_edit(jump){
        let vm=this;
        let params={
          GOODSTYPE:vm.goodstype,
          DELETED:0
        }
        getJumpValue(params).then(response => {
          let res=response.data.OBJECT;
          for(let i=0; i<res.length; i++){
            if(res[i].GOODS_ID==jump){
              vm.ad_jumpValue=res[i].GOODSNAME;
              vm.jumpName=res[i].GOODSNAME;
              vm.jumpId=res[i].GOODS_ID;
            }
          }
        }).catch(error => {
          
        })
      } 
      

    }
  
  }


</script>



